<template>
  <div>
    <footer class="am-menu am-cf">
    <div class="am-menu-column index" id="index">
      <a href="{:url('aim/lists')}">
        <span>首页</span>
      </a>
    </div>
    <div class="am-menu-column explore" id="explore">
      <a href="https://open.weixin.qq.com/connect/oauth2/authorize">
        <span>申请</span>
      </a>
    </div>
    <div class="am-menu-column life" id="life">
      <a href="{:url('aim/lists')}">
        <span>发现</span>
      </a>
    </div>
    <div class="am-menu-column my" id="my">
      <a href="https://open.weixin.qq.com/connect/oauth2/authorize">
        <span>我的</span>
      </a>
    </div>
</footer>
        <div class="ui stacked segment">
          <p>欢迎回来test</p>

          
        </div>
      <div class="container" :style="{transform: 'rotateY(' + degValue + 'deg)'}">
        <div class="front">
          <div class="increment">
            <IncrementCount />
          </div>
          <div class="show-front">{{fontCount}}</div>
          <div class="decrement">
            <DecreaseCount />
          </div>
        </div>

        <div class="back">
          <div class="increment">
            <IncrementCount />
          </div>
          <div class="show-back">{{backCount}}</div>
          <div class="decrement">
            <DecreaseCount />
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { login } from "@/api/user";
import IncrementCount from "@/components/IncrementCount";
import DecreaseCount from "@/components/DecreaseCount";
export default {
  name: "App",
  layout:"empty",
  components: {
    IncrementCount,
    DecreaseCount,
  },
  data() {
    return {
      degValue: 0,
      fontCount: 0,
      backCount: 0,

    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.$nuxt.$on("incremented", ({ num, deg }) => {
      this.fontCount += num;
      this.backCount +=num;
      // this.$nextTick(() => {
      //   this.backCount += num;
      //   //this.degValue += deg;
      // });
    });
    this.$nuxt.$on("decreased", ({ num, deg }) => {
      this.fontCount -= num;
      this.backCount -=num;
      // this.$nextTick(() => {
      //   this.backCount -= num;
      //   //this.degValue -= deg;
      // });
    });
  },
};
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}


.am-menu {
  position: fixed;
  top: 0;
  width: 100%;
  background: #efefef;
  text-align: center;
  height: 54px;
  overflow: hidden;
  z-index: 98;
  border-top: 1px solid #ddd;
}

.am-menu-column {
  width: 25%;
  float: left;
  font-size:16px;
  margin-top:15px;
}

/*new footer*/
/*因为都是用的字体图标可能显示不出来，但是字体颜色会有变化*/
.index i:before {
  content: "\e602";
  color: #999;
}
.explore i:before {
  content: "\e607";
  color: #999;
}
.life i:before {
  content: "\e600";
  color: #999;
}
.my i:before {
  content: "\e605";
  color: #999;
}
.index-active i:after {
  content: "\e603";
  color: #32B5E5;
}
.explore-active i:after {
  content: "\e608";
  color: #32B5E5;
}
.life-active i:after {
  content: "\e601";
  color: #32B5E5;
}
.my-active i:after {
  content: "\e606";
  color: #32B5E5;
}


.index a span,
.explore a span,
.life a span,
.my a span {
  display: block;
  color: #999;
}

.index-active a span,
.explore-active a span,
.life-active a span,
.my-active a span {
  display: block;
  color: #32b4e5;
}

body {
  padding-top: 15px;
}
.container {
    margin-bottom:55px;
}
</style>
